<script setup>
import { queryPreregisterInfo } from '@/api/Base/product';
import { sum } from 'lodash-es';
import 'md-editor-v3/lib/style.css';
import { MdPreview } from 'md-editor-v3';
import PrinterSelector from '@/components/PrinterSelector.vue';
import { to } from '@/utils/routerUtil';
const selectedPrinter = ref()
const printerSelectorRef = ref()
const showPrinterPopup = () => {
  printerSelectorRef.value?.show()
}

definePage({
    name: 'preregisterinfo',
    meta: {
        level: 2,
        title: '预登记信息',
    },
})
function getLabelByValue(value) {
  switch (value) {
    case 0:
      return '客户退换';
    case 1:
      return '客户送修';
    case 2:
      return '客供料';
    case 3:
      return '进货物料';
    case 4:
      return '外修送回';
    case 5:
      return '代工交货';
    case 7:
      return 'PCB';
    case 6:
      return '其他';
    default:
      return '未知';
  }
}

function getColorByValue(value) {
  switch (value) {
    case 0: // 客户退换
      return '#ff7f50';
    case 1: // 客户送修
      return '#1e90ff';
    case 2: // 客供料
      return '#32cd32';
    case 3: // 进货物料
      return '#ffa500';
    case 4: // 外修送回
      return '#9370db';
    case 5: // 代工交货
      return '#20b2aa';
    case 7: // PCB
      return '#ff69b4';
    case 6: // 其他
      return '#a9a9a9';
    default:
      return '#fdc71c';
  }
}
const route = useRoute()
const router = useRouter()

const PreregisterInfoObj = reactive({
    Preregister: {},
    reload: () => {
        load.value = true
        queryPreregisterInfo({
            "preNumber": route.query.id
        }).then(res => {
            PreregisterInfoObj.Preregister = res.data
            load.value = false
        })
    }
})
onMounted(() => {
    PreregisterInfoObj.reload()
})
function onBack() {
    if (window.history.state.back)
        history.back()
    else
        router.replace('/')
}
const load = ref(true)
</script>

<template>

    <div class="card m-[4rem] flex flex-col gap-[10px] mt-[90px]">
        <van-loading v-if="load" vertical>
            <template #icon>
                <van-icon name="star-o" size="30" />
            </template>
            加载中...
        </van-loading>
        <div class="flex flex-col gap-[10px] overflow-y-scroll" v-if="!load">
            <EImage :height="'334px'" class="shadow-sm" :photo-url="PreregisterInfoObj.Preregister.sPhotoUrl" />
            <div class="rounded-[10px] relative shadow-sm w-[100%] bg-white p-[10px]">
                <el-button class="absolute right-10 top-10" @click="showPrinterPopup">打印</el-button>
                <PrinterSelector ref="printerSelectorRef" :printContent='{
                  label: {
                    "label_type": "qr",
                    "printer": "office",
                    "tape": "9mm", 
                    "fontname": "mono",
                    "size": "small",
                    "align": "right",
                    "qrtext": route.query.id,
                    "lines": [
                    route.query.id,
                    ]
                  },
                  count: 2
                }' v-model="selectedPrinter" />
                <h1 class="text-[18px] leading-none">预登记号: {{ PreregisterInfoObj.Preregister.sPreregisterNo }}</h1>
                <h2 class="text-[15px] leading-none text-coolgray">类型: {{ getLabelByValue(PreregisterInfoObj.Preregister.nType)}}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">关联单号: {{ PreregisterInfoObj.Preregister.sTypeOrderNo }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">产品编号: {{ PreregisterInfoObj.Preregister.sProductNo }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">预登记数量: {{ PreregisterInfoObj.Preregister.nPreregisterNum }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">到货数量: {{ PreregisterInfoObj.Preregister.nArriveNum }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">状态: {{ 
                    PreregisterInfoObj.Preregister.nStatus === 0 ? '待处理' : 
                    PreregisterInfoObj.Preregister.nStatus === 1 ? '处理中' : 
                    '已完成' 
                }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">登记时间: {{ 
                    new Date(PreregisterInfoObj.Preregister.dPreregisterTime).toLocaleString() 
                }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">客户备注: {{ 
                    PreregisterInfoObj.Preregister.sCustomerRemark || '无'
                }}</h2>


            </div>
            <div class="rounded-[10px] shadow-sm w-[100%] bg-white p-[10px]">
                <h2 class="text-[15px] leading-none text-coolgray">登记人ID: {{ PreregisterInfoObj.Preregister.nPreregisterEmployeeId }}</h2>
                <h2 class="text-[15px] leading-none text-coolgray">客户ID: {{ 
                    PreregisterInfoObj.Preregister.nCustomerId === -1 ? '无' : 
                    PreregisterInfoObj.Preregister.nCustomerId 
                }}</h2>
            </div>
            
        </div>

        <StepBottom>
            <template #default>
                <el-button  @click='to("updatearrive?id=" + route.query.id )' class="step-bottom-button flex flex-col justify-center items-center text-white">修改</el-button>
            </template>
        </StepBottom>
    </div>
</template>

<style lang="less" scoped>
.card {
    border-radius: 5px;
    opacity: 1;
}
</style>
